<html>
<head>
<meta charset="utf-8">
<title>hxt ajax test demo(runoob.com)</title>
<style>
	table,td,th
{
	border:1px solid black;
	border-collapse:collapse;
	text:center red; 
	text-align:center;
}
div {
	text-align:center;
}	
table
{
	width:100%;
}
th
{
	height:40px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
<!-- 添加你的js 代码-->
	$(document).ready(function(){
		$(".result").hide();	
		$("button.sel").click(function(){	
				
				idnum=$("#sel").val();
			
				$.ajax({
				 type:"get",
                 url:"server/getdata.do",
                 dataType:"html",
				 data: {method:"sel",id : idnum},
				 success:function(data,status){
						
						 	htm="<tr>";
							htm+=data;
							alert(data+":"+status);
							htm+="</tr>";
							$("table").append(htm);
							$(".result").show();
					
						}
					});
			
				
			});
		$("button.del").click(function(){	
				
				idnum=$("#del").val();
				
				$.ajax({
				 type:"post",
                 url:"server/getdata.do",
                 dataType:"html",
				 data: {method:"del",id : idnum},
				 success:function(data,status){						
						 alert("delete success!!!");
					
						}
					});
			
				
			});
				$("button.add").click(function(){	
				
				$.ajax({
				 type:"post",
                 url:"server/getdata.do",
                 dataType:"html",
				 data: {method:"add",id : $("#add_id").val(),name:$("#add_name").val(),clas:$("#add_mailclass").val(),title:$("#add_title").val()},
				 success:function(data,status){						
						 alert("insert success!!!");
					
						}
					});
			
				
			});
				$("button.upd").click(function(){					
				
				$.ajax({
				 type:"post",
                 url:"server/getdata.do",
                 dataType:"html",
				data: {method:"upd",id : $("#upd_id").val(),name:$("#upd_name").val(),clas:$("#upd_mailclass").val(),title:$("#upd_title").val()},
				 success:function(data,status){						
						 
					 alert("update success!!!");
						}
					});
			
				
			});
	});
</script>
</head>
<body>
<!-- 添加html标签-->
	<div>test id:20170824103534081</div>
	<div>查询账户
		<p>
		<label >查询编号</label>
		<input id="sel" type="text"></input>
	    <button class="sel">查询</button>	
		</p>
	 </div>
	<div>删除账户
		<p>
		<label>删除编号</label>
		<input id="del" type="text"></input>
	    <button class="del">删除</button>	
		</p>
	</div>
	<div>添加账户
		<p>
		<label>编号</label>
		<input id="add_id" type="text"></input>
		<label >姓名</label>
		<input id="add_name" type="text"></input>
		<label>信件分类</label>
		<input id="add_mailclass" type="text"></input>
		<label>标题</label>
		<input  id="add_title" type="text"></input>
	    <button class="add">添加</button>	
		</p>
	</div>
	<div>修改账户
		<p>
		<label>编号</label>
		<input id="upd_id" type="text"></input>
		<label>姓名</label>
		<input id="upd_name" type="text"></input>
		<label>信件分类</label>
		<input id="upd_mailclass" type="text"></input>
		<label>标题</label>
		<input id="upd_title" type="text"></input>
	    <button class="upd">修改</button>	
		</p>
	</div>
	<div class="result">
		<h4>查询结果</h4>		
		<table>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>信件分类</th>
			<th>标题</th>
		</tr>
		</table>
	</div>
</body>
</html>